<script setup>
// 获取屏幕安全边界
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="navbar" :style="{ 'padding-top': safeAreaInsets.top + 'px' }">
    <view class="logo">
      <image class="logo-image" src="@/static/images/logo.png"></image>
      <text>便捷 | 亲民 | 美味</text>
    </view>
    <view class="search">
      <input type="text" class="ipt" placeholder="请输入搜索内容" />
    </view>
  </view>
</template>

<style lang="less">
/* 导航栏 */
.navbar {
  display: flex;
  flex-direction: column;
  padding-top: 20rpx;
  background-color: wheat;
  .logo {
    padding-left: 30rpx;
    display: flex;
    align-items: center;
    height: 64rpx;
    image {
      width: 166rpx;
      height: 39rpx;
    }
    text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }
  .search {
    position: relative;
    margin: 16rpx 20rpx;
    height: 64rpx;
    border-radius: 32rpx;
    background-color: white;
    border: 1px solid #f5f5f5;
    .ipt {
      padding-left: 40rpx;
      display: block;
      height: 64rpx;
      color: #928f8f;
      font-size: 28rpx;
    }
  }
}
</style>
